<template>
  <div>
    <el-button type="text" size="small" @click="handlePreview">预览 </el-button>
    <viewer ref="viewer" @inited="inited" :images="imageList" rebuild v-show="false">
      <img v-for="(item, index) in imageList" :key="index" :src="item.url" :alt="item.title" />
    </viewer>
  </div>
</template>
 
<script>
import Vue from 'vue'
//https://mirari.cc/posts/v-viewer#v-viewer-for-vue3
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Viewer.setDefaults({
  Options: {
    "inline": true,
    "button": true,
    "navbar": true,
    "title": true,
    "toolbar": true,
    "tooltip": true,
    "movable": true,
    "zoomable": true,
    "rotatable": true,
    "scalable": true,
    "transition": true,
    "fullscreen": true,
    "keyboard": true,
    "url": "data-source"
  }
});
Vue.use(Viewer);
export default {
  data() {
    return {
      imageList: [
        {
          title: 'dd',
          url: 'https://pic.quanjing.com/ef/x5/QJ6772521114.jpg?x-oss-process=style/794ws'
        },
        {
          title: 'hh',
          url: 'https://img1.baidu.com/it/u=312906760,1722361095&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300'
        }

        // 添加更多图片
      ]
    }
  },
  methods: {
    inited(viewer) {
      this.$viewer = viewer
    },
    handlePreview() {
      this.$viewer.show() // 调用 $viewer.show 方法以显示图片
    }
  }
}
</script>